<template>
  <div>
    <main-title>
      遥感监测地图
    </main-title>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="tableHeaderColor"
      :row-class-name="tableRowClassName">
      <el-table-column
        type="index"
        :index="index => (index + 1 + (page.pageNo - 1) * page.pageSize)"
        label="序号"
        width="50"
      />
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-view"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <page-plugin
      v-show="total > 1"
      :total="total"
      :page.sync="page.pageNo"
      :limit.sync="page.pageSize"
      @changePageNum="changePageNum"
    />
  </div>
</template>

<script>
  import pagePlugin from "@/components/page-plugin"
  import mainTitle from "@/components/main-title"
  export default {
      components: {
          'main-title': mainTitle,
          'page-plugin': pagePlugin
      },
      data(){
          return {
              page:{
                  pageNo: 1,
                  pageSize: 10
              },
              total: 24, //数据总数
              tableData: [{
                  date: '2016-05-02',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1518 弄'
              }, {
                  date: '2016-05-04',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1517 弄'
              }, {
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄'
              }, {
                  date: '2016-05-03',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1516 弄'
              }]
          }
      },
      methods: {

          changePageNum() {
            console.log("修改页码时触发")
          },

          // 设置表头样式
          tableHeaderColor({row, column, rowIndex, columnIndex}){
              // console.log(row, column, rowIndex, columnIndex)
              return 'background-color: #ffba02;color: #000;font-weight: 500;'
          },
          // 设置斑马样式
          tableRowClassName({row, rowIndex}) {
              if (rowIndex%2 === 0) {
                  return 'columns-row-a';
              } else if (rowIndex%2 === 1) {
                  return 'columns-row-b';
              }
          }
      }
  }
</script>
<style>
  .el-table .columns-row-a {
    background: oldlace;
  }

  .el-table .columns-row-b {
    background: #f0f9eb;
  }
</style>
<style lang="scss" scoped>

</style>
